<template>
  <div>
    <el-form :inline="true" :model="cForm" :disabled="!isShowList">
      <el-form-item label="一级分类">
        <el-select v-model="cForm.category1Id"  placeholder="请选择" @change="changeCategory1Id" >
          <el-option :label="cate1.name" :value="cate1.id" v-for="cate1 in category1List" :key="cate1.id"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item  label="二级分类">
        <el-select v-model="cForm.category2Id" placeholder="请选择" @change="changeCategory2Id">
           <el-option :label="cate2.name" :value="cate2.id" v-for="cate2 in category2List" :key="cate2.id"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="三级分类">
        <el-select v-model="cForm.category3Id"  placeholder="请选择" @change="changeCategory3Id">
           <el-option :label="cate3.name" :value="cate3.id" v-for="cate3 in category3List" :key="cate3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cForm: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      },
      category1List: [],
      category2List: [],
      category3List: []
    }
  },
  props: ['isShowList'],
  mounted() {
    this.getCategory1()
  },
  methods: {
    async getCategory1() {
      try {
        let result = await this.$API.category.getCategory1()
        this.category1List = result.data
      }catch(e) {
        this.$message.error('获取一级分类失败')
      }
    },
    async changeCategory1Id(category1Id) {
      this.cForm.category2Id = ''
      this.cForm.category3Id = ''
      this.category2List = []
      this.category3List = []
      try {
         let result = await this.$API.category.getCategory2(category1Id)
         this.category2List = result.data
         this.$emit('changeCategoryId',{categoryId: category1Id,level: 1})
      }catch(e) {
        this.$message.error('获取二级分类失败'+e.message)
      }
    },  
    async changeCategory2Id(category2Id) {
      this.cForm.category3Id = ''
      this.category3List = []
      try {
         let result = await this.$API.category.getCategory3(category2Id)
         this.category3List = result.data
         this.$emit('changeCategoryId',{categoryId: category2Id,level: 2})
      }catch(e) {
        this.$message.error('获取三级分类失败'+e.message)
      }
    },
    changeCategory3Id(category3Id) {
       this.$emit('changeCategoryId',{categoryId: category3Id,level: 3})
    },
    
  }
};
</script>

<style lang="scss">
</style>